欢迎关注「长弓小子」
我们都是为梦想一起努力的人
Fusion Design 是阿里巴巴打造的设计师与工程师的协作平台，提供了一套标准化中后台体验设计原则与模式，优化中后台产品体验一致性问题。本文将具体教你如何使用 Fusion Design，你会发现使用它为设计工作带来的大不同。 全文共 1720 字 11 图（含 5 动图），阅读需要 7 分钟
什么是 Fusion Design
开篇老规矩，给大家介绍一下 Fusion Design，它最适合用来做企业的中后台网页设计与开发。在现有的中后台成百上千个业务形态中，Fusion 抽取交互模式和视觉特点的共性，整理出一套标准化的设计工具和模版。Fusion 一共有四大功能：
1 组件库：同之前详细说过的 Ant Design (可阅读: 干货丨Ant Design全面解析 进行了解) 一样，Fusion 提供了一套完整的组件库，包含按钮、导航栏、选框在内的50多种常用组件，可让页面设计拥有一致性且不会很难看。 2 Fusion 站点：站点是一个新概念，这也是 Fusion 与 Ant Design 的区别之一， 如果说 Ant 是一套组件库，Fusion 则是一个组件库生产厂。在 Fusion 站点，设计师可以在线调配和整理属于自己的设计组件库，打造个性化的主题模版和设计标准，不再拘泥于官方给出的单一标准组件。 3 FusionCool Sketch 插件：FusionCool 作为 Sketch 的插件, 可以将 Fusion 站点上编辑好的设计组件直接导入到 Sketch 中，作为设计师的基础设计工具。 4 Iceworks 客户端：这个功能不需要设计师有太多了解，是专为开发人员打造的工具，以提高前端开发的效率。
设计师如何使用 Fusion
在 Fusion (https://fusion.design) 平台上，设计师可以使用上文提到的功能提高设计效率，并从一个别人眼中的 “美工” 秒变成 “拥有个人设计系统 (Design System) 的设计达人”： 组件库
组件包含按钮、导航栏、选框等在内的50多种常用组件，并详细说明了组件的类型、尺寸、使用环境、应用状态等，产生相应的代码直接提供给开发，打通设计和开发之间的工作流程：
Fusion 站点
在 Fusion 站点，你可以先注册自己的站点，这个站点就是你自己的设计素材库，你可在站点中管理和修改设计组件，制作主题模版，搭建个人的 Design System：所有的设计都不需要从0开始，因为 Fusion 已经为你搭建好了基础模版，你的 Design System 中将包括网站页面设计所需的基本样式、适配方案、组件等，你可以在基础模版上进行任意编辑：比如调整主色调的配色、调整输入框的边框粗细和圆角大小等标准模版：
下图为 Button 组件编辑的示例，将 Button 的边框变粗并更改为绿色：下图为主题颜色编辑的示例，将品牌主色调的深蓝色改成淡红色：
Fusion 也为色彩的编辑提供应用环境预览和对比度校验，确保你选中的颜色符合 WCAG 的 AA 级对比度标准（WCAG：Web 内容无障碍指南，可阅读: 干货丨超全面解析MD暗黑模式 进行了解。该指南中包含 Web 界面设计的原则和标准，使普通用户和残疾人士都可以无障碍使用页面。4.5 : 1 为 WCAG 规定的对比度下限，小于该值则为不易读内容。）。如下图所示，个人觉得这里的交互提示与颜色应用的实际情况有些偏差，需要进一步打磨和优化，大家可以自行尝试：
FusionCool Sketch 插件
在 Fusion 站点中完成编辑后，需要保存并发布你的 Design System：
接下来，下载 FusionCool Sketch 插件，安装在 Sketch 中，右下角登陆你自己的账号，选择自己发布的 Design System，就可以使用刚刚做好的组件进行页面设计了：FusionCool 同时提供设计 Fusion 基础组件和主题模版，供设计师参考使用。同时，设计师可以将做好的页面进行 HTML 导出，替代了 Sketch Measure 的标注和导出功能，以保证设计与开发无障碍对接：
Fusion Design 工作流
Fusion Design 的两个主要工具：设计师工具 FusionCool 和工程师工具 Iceworks，与 Fusion 站点共同组成了 “一个平台，两个端口” 的发展模式，其工作流程如下：STEP 1：设计师在 Fusion 站台上配置完成一个 Design System，保存并发布之后，获得 FusionCool 组件库主题包
STEP 2：设计师使用 Sketch 及其插件 FusionCool，创作完成设计稿STEP 3：工程师使用 Iceworks 和设计师给出的主题包创建项目作为设计师，使用工具 FusionCool 在 Sketch 中既能设计页面，又能沉淀已经设计完成的模板；作为工程师，使用工具 Iceworks，在项目中既能使用现成的模块，又能沉淀已经开发完成的模块，同时也省去了设计与开发过程中不必要的重复性沟通：
阿里集团内的天猫MUI、淘宝ICE Design、阿里云Wind、盒马鲜生Hippo等Design System都是基于Fusion Design深度定制, 满足各个BU不同的业务需求。目前Fusion Design Mobile Web端组件正在开发中，React Native、Weex、flutter以及小程序用的组件暂无排期。
本文图片及内容参考来源：
https://zhuanlan.zhihu.com/p/54751219
https://www.jianshu.com/p/8058c9bde8c6